/*
Naijanimi Free SMS Application for Nokia mobiles.

"Naijanimi Free SMS Application" is protected by the copyright law
(c) 2011 Enrico Miglino / Tech Consulting (enrico.miglino@ovi.com)
Distributed under the LGPL 3.0 license.

This file is part of "Naijanimi Free SMS Application".

    "Naijanimi Free SMS Application" is free software: you can redistribute it
    and/or modify it under the terms of the Lesser GNU General Public License
    as published by the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    "Naijanimi Free SMS Application" is distributed in the hope that it
    will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    Lesser GNU General Public License for more details.

    You should have received a copy of the Lesser GNU General Public License
    along with "Naijanimi Free SMS Application".
    If not, see <http://www.gnu.org/licenses/>.
*/

import QtQuick 1.0

Item {
    id: tabFeatures

    // Setting the default property to stack.children means any child items
    // of the tabFeatures are actually added to the 'stack' item's children.
    // See the "Extending Types from QML" documentation for details on default
    // properties.
    default property alias content: stack.children
    property int current: 0
    // This value represent the percentage width reserved for the
    // vertical tabs.
    property real leftTabSize: 0.10
    // This value represents the height percentage dedicated to show the tabs
    // Every tab height is dynamically caluclated on the number of tab items to show.
    // Adjust this value following the usage of the tabbed interface.
    property real verticalTabSize: 0.60
    // Real width of every tab. Should be proportional to the maximum lenght of the
    // tab title string to be shown.
    property real leftTabWidth: 0.25
    // Real width of the tabbed area to show tab content.
    property real rightAreaSize: 0.75
    // Vertical position (percentage) respect to the top of the tab column
    property real tabTopMargin: 0.10

    onCurrentChanged: setOpacities()
    Component.onCompleted: setOpacities()

    // This function changes the opacities of all the tabbed items, leaving visibile
    // only the current selected tab.
    function setOpacities() {
        for (var i = 0; i < stack.children.length; ++i) {
            stack.children[i].opacity = (i == current ? 1 : 0)
        }
    }

    // Definition of the generic item repeated
    // for every item instance.
    Item {
        id: stack

        // Heigt is the same of the object, that is correctly sized
        // when instantiated
        height: tabFeatures.height
        // Width of the item should be a percentage of the object
        // width, to leave space for the vertical tabs.
        width: tabFeatures.width * tabFeatures.rightAreaSize
        anchors.top: tabFeatures.top;
        anchors.bottom: tabFeatures.bottom
        anchors.right: tabFeatures.right
    }

    // Tab header: defines the left side column of tabs.
    // The model of this header is replicated by the repeater
    // for every item defined when the object is instantiated
    Column {
        id: header

        // Top margin header can be adjusted to show the left tabs column
        // at the desired hegiht of the screen
        anchors.top: tabFeatures.top
        anchors.topMargin: tabFeatures.height * tabFeatures.tabTopMargin

        Repeater {
            model: stack.children.length

            // The delegate of the repeater
            delegate: Rectangle {
                // Height of every tab element is calculated as a percentage
                // of the total screen height divided by the dynamic number of elements
                height: (tabFeatures.height * verticalTabSize) / stack.children.length;
                // Left tabs width is defined as a percentage of the total screen width
                // usually a bit greather than the leftTabSize value:
                //      leftTabSize = visible side of the tabs
                //      leftTabWidth = real lenght of the tabs
                width: tabFeatures.width * tabFeatures.leftTabWidth

                Rectangle {
                    width: parent.width; height: 1
                    anchors { top: parent.top; topMargin: 1 }
                    color: "#acb2c2"
                }

                // The tab image surrounding the text title of every item
                // Copy to the bottom.
                BorderImage {
                    id: tabBorderImage

                    anchors { fill: parent; topMargin: 1; bottomMargin: 1 }
                    border { top: 2; bottom: 2 }
                    source: "images/tab.png"
                    // This is the default value for all the tabs
                    // Only the current tab adds '2' the the
                }

                // The text content of the tab.
                Text {
                    id: tabTextContent

                    horizontalAlignment: Qt.AlignLeft;
                    verticalAlignment: Qt.AlignVCenter
                    anchors.fill: parent
                    anchors.left: parent.left
                    anchors.leftMargin: 4
                    text: stack.children[index].title
                    font.bold: tabFeatures.current == index
                    color: tabFeatures.current == index ? "black" : "grey"
                    elide: Text.ElideRight
                }

                // When user click on a tab, the index of the clicked tab
                // bacome the current index and the corresponding object is shown
                MouseArea {
                    anchors.fill: parent
                    onClicked: tabFeatures.current = index
                }
            }
        }
    }
}
